{{ 'component-image-with-text.css' | asset_url | stylesheet_tag }}

<style>
  .image-with_content{
    position: relative;
    overflow: hidden;
  }
  .image-with_conten,
  .image-with_conten .grid__item{
        background: #F4F8FC;
  }
  .image-with_content .grid__item:first-child{
    max-width: 61%;
    width: 61%;
  }
  .image-with_content .grid__item:last-child{
    max-width: 39%;
    width: 39%;
  }
  .image-with_content .image-with-text__text{
    margin-top: 0;
  }
  .image-with_content .image-with-text__text p{
    font-size: 16px;
    line-height: 24px;
    color: #000;
  }
  .image-with_content .image-with-text .image-with-text__heading{
    font-size: 36px;
    font-weight: 700;
    line-height: 48px;
    margin: 8px 0 24px;
  }
  .image-text_key{
    margin: 12px 0;
    text-align: left;
    color: #80B6EF;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    font-style: italic;
  }
  .grid__item-block{
    height: 100%;
  }
  .image-with_content{
    margin-top: 0;
    background: #F4F8FC;
  }
  .image-with_content .grid__item{
    background: #F4F8FC;
  }
  .image-with_content .image-with-text{
    margin: 40px 0;
  }

  @media screen and (min-width: 1441px){
    .image-with_content .image_first .grid__item:first-child{
      padding-right: 80px;
    }
    .image-with_content .text_first .grid__item:first-child{
      padding-left: 80px;
    }
    .image_first .block-type_text {
      max-width: 360px;
      margin-left: auto;
    }
    .image_first .grid__item-block {
      left: 0;
    }
 }

  .grid__item-block{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    transform: translateY(-50%);
  }
  .block-type_text{
    max-width: 360px;
    text-align: left;
  }
  .grid__item-block .image-with-text__content{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
  }
  element.style {
    padding: 0;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 60px;
}



@media screen and (max-width: 1319px){
  .grid__item-block .image-with-text__content{
    max-width: 100%;
    margin: 0 auto;
    padding: 0 60px;
  }
}


@media screen and (max-width: 990px){
  .image-with_content .title{
    padding-top: 40px;
  }
  .image-with_content .image-with-text,
  .image-with_content {
    margin: 0;
  }
  .image-with_content .image-with-text .grid .grid__item:first-child {
    order: 0;
  }
  .grid__item-block .image-with-text__content {
    max-width: 100%;
    margin: 0 auto;
    padding: 26px;
}
  .block-type_text {
      max-width: 100%;
      text-align: left;
  }
  .grid__item-block {
      position: relative;
      width: 100%;
      height: 100%;
      top: auto;
      transform: none;
  }
  .image-with_content .grid__item:first-child,
  .image-with_content .grid__item:last-child {
    max-width: 100%;
    width: 100%;
 }
 .image-with_content .image-with-text__text p{
  font-size: 14px;
  line-height: 22px;
}
.image-with_content .image-with-text .image-with-text__heading {
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    margin: 8px 0 20px;
}
.image-text_key{
  font-size: 20px;
  line-height: 28px; 
  margin: 8px 0;
}
.image-with_content .image-with-text__content {
  padding: 40px 26px;
}
.image-with_content .image_mobile{
  display: block;
}
}
</style>

<div class="imagecontent-{{ section.id }} image-with-text {% if section.settings.full_width %}image-with-text--full-width{% else %}page-width{% endif %} color-scheme-{{ section.settings.color_scheme }}">
   {%- if section.settings.heading != blank -%}
    <div class="title">
     <span>{{ section.settings.heading }}</span>
    </div>
{% endif %}
  <div class="{{ section.settings.layout }} image-with-text__grid class-index color-{{ section.settings.color_scheme }} grid grid--gapless grid--1-col grid--2-col-tablet gradient{% if section.settings.layout == 'text_first' %} image-with-text__grid--reverse{% endif %}">
    <div class="grid__item">
      <div class="pc-banner">
          <div class="image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
        {% if section.settings.height == 'adapt' and section.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}
      >
        {%- if section.settings.image != blank -%}
          <img
            srcset="{%- if section.settings.image.width >= 165 -%}{{ section.settings.image | img_url: '165x' }} 165w,{%- endif -%}
              {%- if section.settings.image.width >= 323 -%}{{ section.settings.image | img_url: '323x' }} 323w,{%- endif -%}
              {%- if section.settings.image.width >= 360 -%}{{ section.settings.image | img_url: '360x' }} 360w,{%- endif -%}
              {%- if section.settings.image.width >= 535 -%}{{ section.settings.image | img_url: '535x' }} 535w,{%- endif -%}
              {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%}
              {%- if section.settings.image.width >= 1070 -%}{{ section.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
              {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
              {{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }}w"
              data-src="{{ section.settings.image | img_url: '1500x' }}"
            sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
            alt="{{ section.settings.image.alt | escape }}"
            loading="lazy"
            class="lazyload"
            width="{{ section.settings.image.width }}"
            height="{{ section.settings.image.height }}"
          >
        {%- else -%}
          {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
        {%- endif -%}
         </div>
      </div>
      <div class="image_mobile image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image_mobile != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
        {% if section.settings.height == 'adapt' and section.settings.image_mobile != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image_mobile.aspect_ratio | times: 100 }}%;"{% endif %}
        >
        {%- if section.settings.image_mobile != blank -%}
        <img
        srcset="{%- if section.settings.image_mobile.width >= 375 -%}{{ section.settings.image_mobile | img_url: '375x' }} 375w,{%- endif -%}
        {%- if section.settings.image_mobile.width >= 412 -%}{{ section.settings.image_mobile | img_url: '412x' }} 412w,{%- endif -%}
        {%- if section.settings.image_mobile.width >= 750 -%}{{ section.settings.image_mobile | img_url: '750x' }} 750w,{%- endif -%}
        {%- if section.settings.image_mobile.width >= 1100 -%}{{ section.settings.image_mobile | img_url: '1100x' }} 1100w,{%- endif -%}
        {%- if section.settings.image_mobile.width >= 1500 -%}{{ section.settings.image_mobile | img_url: '1500x' }} 1500w,{%- endif -%}
        {%- if section.settings.image_mobile.width >= 1780 -%}{{ section.settings.image_mobile | img_url: '1780x' }} 1780w,{%- endif -%}
        {%- if section.settings.image_mobile.width >= 1903 -%}{{ section.settings.image_mobile | img_url: '1903x' }} 1903w,{%- endif -%}
        {{ section.settings.image_mobile | img_url: 'master' }} {{ section.settings.image_mobile.width }}w"
        sizes="{% if section.settings.image_2 != blank and section.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image_2 != blank %}50vw{% else %}100vw{% endif %}"
        src="{{ section.settings.image_mobile | img_url: '1500x' }}"
        loading="lazy"
        alt="{{ section.settings.image_mobile.alt | escape }}"
        width="{{ section.settings.image_mobile.width }}"
        height="{{ section.settings.image_mobile.width | divided_by: section.settings.image_mobile.aspect_ratio }}"
        >
        {%- else -%}
        {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
        {%- endif -%}
      </div>
    </div>
    <div class="grid__item">
      <div class="grid__item-block">
        <div class="image-with-text__content image-with-text__content--{{ section.settings.height }}">
           <div class="block-type_text">
            {%- for block in section.blocks -%}
              {% case block.type %}
                {%- when 'heading' -%}
                  <h2 class="image-with-text__heading h1" {{ block.shopify_attributes }}>
                    {{ block.settings.heading | escape }}
                  </h2>
                {%- when 'title' -%}
                  <h2 class="text" {{ block.shopify_attributes }}>
                    {{ block.settings.richtext }}
                  </h2>
                {%- when 'text' -%}
                  <div class="image-with-text__text rte" {{ block.shopify_attributes }}>{{ block.settings.text }}</div>
                {%- when 'content' -%}
                    <div class="image-text_key center" {{ block.shopify_attributes }}>{{ block.settings.text }}</div>  
                {%- when 'button' -%}
                  {%- if block.settings.button_label != blank -%}
                    <a{% if block.settings.button_link != blank %} href="{{ block.settings.button_link }}"{% endif %} class="button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link == blank %} aria-disabled="true"{% endif %} {{ block.shopify_attributes }}>
                      {{ block.settings.button_label | escape }}
                    </a>
                  {%- endif -%}
              {%- endcase -%}
            {%- endfor -%}
           </div>
        </div>
      </div>
     
    </div>
  </div>
</div>


{% unless section.settings.text_up %}
  <script>

  $(window).ready(function() {
    var tooSmall = false;
    var controller = null;
    var maxWidth = 991;
  
    if( $(window).width() < maxWidth ) {
      tooSmall = true;
    }

    function initScrollMagic() {
      const tenwaysImagecontent = document.querySelector(".imagecontent-{{ section.id }}");
      const tImagecontent = tenwaysImagecontent.querySelector(".block-type_text");
      const ImagecontentController = new ScrollMagic.Controller();
      const tl = new TimelineMax();
      
      tl.fromTo(
        '.imagecontent-{{ section.id }} .block-type_text',
        1,
        {
          autoAlpha: .3,
          opacity: .3,
          yPercent: '50%',
        },
        {
          autoAlpha: 1,
          opacity: 1,
          yPercent: '0',
          ease: Linear.easing
        },
      )
      
     
      let scene6 = new ScrollMagic.Scene({
        duration: 80,
        triggerElement: tenwaysImagecontent,
        triggerHook: 0.1
      })
      .setTween(tl)
      .setPin(tenwaysImagecontent)
      .addTo(ImagecontentController); 
    }

    if( !tooSmall ) {
      initScrollMagic();
    }

    $(window).resize( function() {
      var wWidth = $(window).width();
      if( wWidth < maxWidth ) {
        if( ImagecontentController !== null && ImagecontentController !== undefined ) {
          ImagecontentController = ImagecontentController.destroy( true );
        }
      } else if( wWidth >= maxWidth ) {
        if( ImagecontentController === null || ImagecontentController === undefined ) {
          initScrollMagic();
        }
      }
    });
  })
</script>

{% endunless %}





{% schema %}
{
  "name": "Image with content",
  "class": "spaced-section spaced-section--full-width image-with_content",
  "settings": [
    {
      "type": "checkbox",
      "id": "full_width",
      "default": false,
      "label": "t:sections.rich-text.settings.full_width.label"
    },
    {
      "type": "checkbox",
      "id": "text_up",
      "default": true,
      "label": "No Text up"
    },
    {
    "type": "text",
    "id": "heading",
    "label": "Title"
   },
    {
      "type": "image_picker",
      "id": "image",
      "label": "t:sections.image-with-text.settings.image.label"
    },
    {
        "type": "image_picker",
        "id": "image_mobile",
        "label": "Image mobile"
     },
    {
      "type": "select",
      "id": "height",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.image-with-text.settings.height.options__1.label"
        },
        {
          "value": "small",
          "label": "t:sections.image-with-text.settings.height.options__2.label"
        },
        {
          "value": "large",
          "label": "t:sections.image-with-text.settings.height.options__3.label"
        }
      ],
      "default": "adapt",
      "label": "t:sections.image-with-text.settings.height.label"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "background-1",
          "label": "t:sections.image-with-text.settings.color_scheme.options__1.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.image-with-text.settings.color_scheme.options__2.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.image-with-text.settings.color_scheme.options__3.label"
        },
        {
          "value": "accent-1",
          "label": "t:sections.image-with-text.settings.color_scheme.options__4.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.image-with-text.settings.color_scheme.options__5.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.image-with-text.settings.color_scheme.label"
    },
    {
      "type": "select",
      "id": "layout",
      "options": [
        {
          "value": "image_first",
          "label": "t:sections.image-with-text.settings.layout.options__1.label"
        },
        {
          "value": "text_first",
          "label": "t:sections.image-with-text.settings.layout.options__2.label"
        }
      ],
      "default": "image_first",
      "label": "t:sections.image-with-text.settings.layout.label",
      "info": "t:sections.image-with-text.settings.layout.info"
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "t:sections.image-with-text.blocks.heading.name",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Image with text",
          "label": "t:sections.image-with-text.blocks.heading.settings.heading.label"
        }
      ]
    },
    {
      "type": "title",
      "name": "title",
      "settings": [
        {
          "type": "richtext",
          "id": "richtext",
          "label": "Richtext"
        }
      ]
    },
    {
      "type": "text",
      "name": "t:sections.image-with-text.blocks.text.name",
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
          "label": "t:sections.image-with-text.blocks.text.settings.text.label"
        }
      ]
    },
    {
      "type": "button",
      "name": "t:sections.image-with-text.blocks.button.name",
      "settings": [
        {
          "type": "text",
          "id": "button_label",
          "default": "Button label",
          "label": "t:sections.image-with-text.blocks.button.settings.button_label.label",
          "info": "t:sections.image-with-text.blocks.button.settings.button_label.info"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "t:sections.image-with-text.blocks.button.settings.button_link.label"
        }
      ]
    },
    {
      "type": "content",
      "name": "content",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "label": "Text"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Image with content",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "text"
        },
        {
          "type": "button"
        }
      ]
    }
  ]
}
{% endschema %}
